<template>
  <div class="row ml-xl-16 ml-lg-16 ml-md-16 ml-sm-0 mr-xl-3 mr-xl-3 no-gutters pin-image-row">
    <div class="image-box col-xl-10 col-lg-8 col-md-10 col-sm-7 col-xs-12" v-viewer>
      <div class="" :class="imgList.length > 1 ?  (url == '/homepage' ? 'pin-img-med' : 'pin-img-min'):'pin-img-max'" v-for="(item ,index) in imgList" :key="index">
        <img class="image" :src="item" alt=""/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgList: {
      type: Array,
    }
  },
  data: () => ({
    url:""

  }),
      created() {
    this.url = this.$route.path
  },
}
</script>

<style scoped>

.image-box{
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
.pin-img-min {
    width: 110px;
    height: 110px;
}
.pin-img-med {
    width: 130px;
    height: 130px;
}
.pin-img-max {
    width: 200px;
    height: 200px;
}
.image{
    width: 100%;
    height: 100%;
}
</style>
